<template>
	<view class="page">
		<Navbar fixed statusBar leftIcon="back" title=" " backgroundColor="transparent" color="white"></Navbar>
		<view class="container">
			<view class="tui-bg-box">
				<image src="/static/images/login/bg_login.png" class="tui-bg-img"></image>
				<image :src="detail.headUrl || '/static/images/my/customer.png'" class="tui-photo"></image>
				<view class="tui-login-name">{{ detail.nickname || '金猪宝宝' }}</view>
				<view class="tui-login-name1">{{ detail.mobilePhone }}</view>
				<view class="tui-login-name2">总返利：{{ detail.rebateAmount }}</view>
			</view>
		</view>

		<view class="tui-cell-header"><view class="tui-cell-title">返利记录</view></view>

		<view class="item b-b" :class="{ income: item.money > 0 }" v-for="(item, index) in list" :key="index">
			<view class="left column">
				<view class="tit clamp">{{ item.ruleType }}</view>
				<view class="time">{{ item.createdTime }}</view>
			</view>
			<text v-if="item.amount > 0" class="price">+</text>
			<text class="price">{{ item.amount }}</text>
		</view>
		<Loading type="img" v-if="loading"></Loading>
	</view>
</template>

<script>
import Navbar from '@/components/Navbar.vue';
import { teamRebateRecordListPage } from '@/service/home.js';
import { groupItemListByKey } from '@/service/upload.js';
let typeMap = {};
export default {
	components: {
		Navbar
	},
	data() {
		return {
			params: {
				pageNum: 1,
				pageSize: 10
			},
			loading: true,
			list: [],
			typeMap: {}
		};
	},
	async onLoad(item) {
		this.detail = item;
		if (this.detail.headUrl == 'null') {
			this.detail.headUrl = '';
		}
		if (this.detail.nickname == 'null') {
			this.detail.nickname = '';
		}
		await this.getGroupItemListByKey();
		if (item.id) {
			this.id = item.id;
			this.getList();
		}
	},
	onPullDownRefresh() {
		this.params.pageNum = 1;
		this.getList();
		setTimeout(v => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onReachBottom() {
		this.getList();
	},
	methods: {
		async getGroupItemListByKey() {
			const resp = await groupItemListByKey('distributionType');
			resp[0].typeItems.forEach(v => {
				typeMap[v.itemCode] = v.itemName;
			});
		},
		async getList() {
			try {
				this.loading = true;

				const resp = await teamRebateRecordListPage({ ...this.params, userId: this.id });
				resp.data = resp.data.map(v => {
					v.ruleType = typeMap[v.ruleType];
					console.log(v.ruleType);
					return v;
				});
				this.list = this.params.pageNum == 1 ? resp.data : [...this.list, ...resp.data];
				this.params.pageNum++;
			} finally {
				this.loading = false;
				//TODO handle the exception
			}
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #ebebeb;
}
.page {
	padding-bottom: 20upx;
}
.tui-bg-box {
	width: 100%;
	box-sizing: border-box;
	position: relative;
	padding-top: 44rpx;
}

.tui-photo {
	height: 138rpx;
	width: 138rpx;
	display: block;
	margin: 2rpx auto 0 auto;
	border-radius: 50%;
	position: relative;
	z-index: 2;
}

.tui-login-name {
	height: 40rpx;
	font-size: 36rpx;
	color: #fff;
	margin: 16rpx auto 0 auto;
	text-align: center;
	position: relative;
	z-index: 2;
}
.tui-login-name1 {
	height: 40rpx;
	font-size: 28rpx;
	color: #f7f7f7;
	margin: 10rpx auto 0 auto;
	text-align: center;
	position: relative;
	z-index: 2;
}
.tui-login-name2 {
	height: 40rpx;
	font-size: 34rpx;
	color: #fcfcfc;
	margin: 4rpx auto 0 auto;
	text-align: center;
	position: relative;
	z-index: 2;
}

.tui-bg-img {
	width: 100%;
	height: 380rpx;
	display: block;
	position: absolute;
	top: 0;
}

.tui-login-from {
	width: 100%;
	padding: 128rpx 104rpx 0 104rpx;
	box-sizing: border-box;
}

.tui-input {
	font-size: 32rpx;
	flex: 1;
	display: inline-block;
	padding-left: 32rpx;
	box-sizing: border-box;
	overflow: hidden;
}

.tui-line-cell {
	padding: 27rpx 0;
	display: -webkit-flex;
	display: flex;
	-webkiit-align-items: center;
	align-items: center;
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
}

.tui-line-cell::after {
	content: '';
	position: absolute;
	border-bottom: 1rpx solid #e0e0e0;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	bottom: 0;
	right: 0;
	left: 0;
}

.tui-top28 {
	margin-top: 28rpx;
}

.tui-btn-class {
	width: 196rpx !important;
	height: 54rpx !important;
	border-radius: 27rpx !important;
	font-size: 28rpx !important;
	padding: 0 !important;
	line-height: 54rpx !important;
}

.tui-btn-submit {
	margin-top: 100rpx;
}

.tui-protocol {
	color: #333;
	font-size: 24rpx;
	text-align: center;
	width: 100%;
	margin-top: 29rpx;
}

.tui-protocol-red {
	color: #f54f46;
}
.tui-cell-header {
	width: 100%;
	height: 100rpx;
	padding: 0 26rpx;
	margin-top: 66upx;
	margin-bottom: 20upx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tui-cell-title {
	font-size: 36rpx;
	line-height: 50rpx;
	font-weight: 600;
	color: #333;
}
.item {
	display: flex;
	width: 710upx;
	border-radius: 12upx;
	margin: 10upx auto;
	box-sizing: border-box;
	padding: 30rpx 30rpx 30rpx 24rpx;
	background-color: #fff;

	&:after {
		left: 30rpx;
		border-color: #e8e8e8;
	}
	.mix-icon {
		flex-shrink: 0;
		width: 72rpx;
		font-size: 52rpx;
		transform: translateY(-6rpx);
	}
	.icon-tixian1 {
		color: #fd6663;
	}
	.icon-zhangdanmingxi01 {
		color: #ff893a;
	}
	.icon-chongzhi {
		color: #39c585;
	}
	.left {
		margin-left: 20upx;
		flex: 1;
		overflow: hidden;
	}
	.tit {
		font-size: 34rpx;
		color: #000000;
		line-height: 1.4;
		margin-bottom: 20rpx;
	}
	.time {
		font-size: 24rpx;
		color: #999;
	}
	.price {
		font-size: 38rpx;
		color: $primary;
		margin-top: 20upx;
		font-weight: 700;
	}
	&.income {
		.price {
			color: #00c700;
		}
		.icon-zhangdanmingxi01 {
			color: #39c585;
		}
	}
}
</style>
